import { FC } from "react";
import { useImmer } from "use-immer";
const StateDemo02: FC = () => {
  //useState可以触发组件更新
  const [userInfo, updateUserInfo] = useImmer({ name: "张三", age: 20 });

  // 点击累加
  function edit() {
    // 不可变数据，不去修改state的值，而是传入一个新的值或者返回一个新值的函数或者表达式
    // setUserInfo({ name: "张三", age: 21 }); // 全量语法
    updateUserInfo((draft) => {
      draft.age = 21;
    }); // 结构语法
  }

  return (
    <>
      <h3>state：不可变数据</h3>
      <div> {JSON.stringify(userInfo)} </div>
      <button onClick={edit}> 修改年龄 </button>
    </>
  );
};

export default StateDemo02;
